import React, {Component} from 'react';
import { BrowserRouter as Router,Route} from 'react-router-dom';
import logo from './logo.svg';
import './App.css';
import './containers/hello.js'
import './style/hello.css';
import Home from './pages/Home';
import Page1 from './pages/page1';
import Page2 from './pages/page2';
import Page3 from './pages/page3';



class App extends Component {
    constructor(props) {
        super(props);
        this.state = {data: "hello"};
        // 这边绑定是必要的，这样 `this` 才能在回调函数中使用
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        alert("恭喜，您学会react了");
    }

    render() {
        return (
            <div className="App">
                <div className="App-header">
                    <img src={logo} className="App-logo" alt="logo"/>
                    <h2>欢迎来到菜鸟教程</h2>
                    <button onClick={this.handleClick} className={'btn'}>click</button>

                    <div id={'skip'}>
                        <button id={'btn1'} onClick={this.handleClick} className={'linkbtn'}>按钮1</button>
                        <button id={'btn2'} onClick={this.handleClick} className={'linkbtn'}>按钮2</button>
                    </div>

                    <Router path="/" component={Home} />
                    <Router path="/Page1" component={Page1} />
                    <Router path="/Page2" component={Page2} />
                    <Router path="/Page3" component={Page3} />


                </div>

                <p className="App-intro">
                    你可以在 <code>src/App.js</code> 文件中修改。
                </p>
            </div>
        );
    }

}

export default App;
